<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<style type="text/css">
			#test1{
				margin: 50px auto;
				
			}
			#test1 img{
				width: 100%;
				height: 100%;
			}
			#div1{
				width: 1448px;
				margin: 50px auto;
			}
			#div1>div{
				float: left;
				margin-right: 20px;
				margin-top: 20px;
			}
			#div1 img{
				width: 200px;
				height: 100px;
			}
			.layui-btn-primary{
				border: 0px;
			}
			.bt{
				width: 100%;
				/*background: rgb(76,65,42);*/
				color: white;
				top: -100px;
				left: 100px;
				position: relative;
			}
			.bbtt {
			    width: 100px;
			    height: 25px;
			    background: rgba(0,0,0,.7);
			    color: white;
			    top: -25px;
			    left: 61px;
			    position: relative;
			    cursor:pointer;
			}
			.sc{
				background: rgba(0,0,0,.0);
				border: 0px;
				color: red;
				position: relative;
				top: -41px;
				left: -82px;
			}
			.lj {
			    width: 99px;
			    height: 25px;
			    background: rgba(0,0,0,.7);
			    color: white;
			    top: -50px;
			    left: 162px;
			    position: relative;
			    cursor:pointer;
			}
			
		</style>
	</head>
	<body>
		<div class="layui-carousel" id="test1">
		  <div carousel-item>
		    <!--<div><img src="static/img/1.jpg"/><span id="">条目1</span></div>
		    <div><img src="static/img/2.jpg"/><span id="">条目1</span></div>
		    <div><img src="static/img/3.jpg"/><span id="">条目1</span></div>
		    <div><img src="static/img/4.jpg"/></div>-->
		  </div>
		</div>
		
		
		
		
		<div id="div1">
			<div tex="0">
				<button onclick="le(this)" type="button" class="layui-btn layui-btn-primary">
  					<i class="layui-icon">&#xe603;</i>
				</button>
				<span class="s"><a href="https://www.baidu.com/"><img src="static/img/1.jpg"/></a></span>
				<button onclick="ri(this)" type="button" class="layui-btn layui-btn-primary">
  					<i class="layui-icon">&#xe602;</i>
				</button>
				<button type="button" onclick="sc(this)" class="sc"><i class="layui-icon">&#x1006;</i></button>
				<div class="bbtt" onclick="bt(this)">
					标题
				</div>
				<div class="lj" onclick="lj(this)">
					链接
				</div>
			</div>
			<div tex="1">
				<button onclick="le(this)" type="button" class="layui-btn layui-btn-primary">
  					<i class="layui-icon">&#xe603;</i>
				</button>
				<span class="s"><a href="https://www.baidu.com/"><img src="static/img/2.jpg"/></a></span>
				<button onclick="ri(this)" type="button" class="layui-btn layui-btn-primary">
  					<i class="layui-icon">&#xe602;</i>
				</button>
				<button type="button" onclick="sc(this)" class="sc"><i class="layui-icon">&#x1006;</i></button>
				<div class="bbtt" onclick="bt(this)">
					标题
				</div>
				<div class="lj" onclick="lj(this)">
					链接
				</div>
			</div>
			<div tex="2">
				<button onclick="le(this)" type="button" class="layui-btn layui-btn-primary">
  					<i class="layui-icon">&#xe603;</i>
				</button>
				<span class="s"><a href="https://www.baidu.com/"><img src="static/img/3.jpg"/></a></span>
				<button onclick="ri(this)" type="button" class="layui-btn layui-btn-primary">
  					<i class="layui-icon">&#xe602;</i>
				</button>
				<button type="button" onclick="sc(this)" class="sc"><i class="layui-icon">&#x1006;</i></button>
				<div class="bbtt" onclick="bt(this)">
					标题
				</div>
				<div class="lj" onclick="lj(this)">
					链接
				</div>
			</div>
			<div tex="3">
				<button onclick="le(this)" type="button" class="layui-btn layui-btn-primary">
  					<i class="layui-icon">&#xe603;</i>
				</button>
				<span class="s"><a href="https://www.baidu.com/"><img src="static/img/4.jpg"/></a></span>
				<button onclick="ri(this)" type="button" class="layui-btn layui-btn-primary">
  					<i class="layui-icon">&#xe602;</i>
				</button>
				<button type="button" onclick="sc(this)" class="sc"><i class="layui-icon">&#x1006;</i></button>
				<div class="bbtt" onclick="bt(this)">
					标题
				</div>
				<div class="lj" onclick="lj(this)">
					链接
				</div>
			</div>
		</div>
		
		<button type="button" class="layui-btn" id="test2">
		    <i class="layui-icon">&#xe67c;</i>上传图片
		</button>
		
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="/bck/static/js/jquery.min.js"></script>
		<script type="text/javascript">
			var ins;
			var carousel;
			var layer;
			var js=3;//添加多少
			function le(obj){
				if(parseInt($(obj).parent().attr("tex"))!=0){
					var arr=[];
					var data = $("#div1>div").length;
					for (var a = 0;a<$("#div1>div").length;a++) {
						
						arr.push($("#div1>div").eq(a).html());
					}
					arr[parseInt($(obj).parent().attr("tex"))-1]=$("[tex='"+$(obj).parent().attr("tex")+"']").html();
					arr[parseInt($(obj).parent().attr("tex"))]=$("[tex='"+(parseInt($(obj).parent().attr("tex"))-1)+"']").html();;//$(("[tex='"+parseInt($(obj).parent().attr("tex")+"']")-1)).html();
					$("#div1").html("");
					for (var b = 0;b<data;b++) {
						$("#div1").append('<div tex="'+b+'">'+arr[b]+'</div>');
					}
					$("#test1>div").html("");
					for (var a = 0;a<$(".s").length;a++) {
						$("#test1>div").append("<div>"+$($(".s")[a]).html()+"<span class='bt'>"+$($(".bbtt")[a]).text()+"</span></div>");
					}
					ins.reload();
				}
			}
			function ri(obj){
				if(parseInt($(obj).parent().attr("tex"))!=js){
					var arr1=[];
					var data1 = $("#div1>div").length;
					for (var a = 0;a<$("#div1>div").length;a++) {
						arr1.push($("#div1>div").eq(a).html());
					}
					arr1[parseInt($(obj).parent().attr("tex"))+1]=$("[tex='"+$(obj).parent().attr("tex")+"']").html();
					arr1[parseInt($(obj).parent().attr("tex"))]=$("[tex='"+(parseInt($(obj).parent().attr("tex"))+1)+"']").html();;//$(("[tex='"+parseInt($(obj).parent().attr("tex")+"']")-1)).html();
					$("#div1").html("");
					for (var b = 0;b<data1;b++) {
						$("#div1").append('<div tex="'+b+'">'+arr1[b]+'</div>');
					}
					$("#test1>div").html("");
					for (var a = 0;a<$(".s").length;a++) {
						$("#test1>div").append("<div>"+$($(".s")[a]).html()+"<span class='bt'>"+$($(".bbtt")[a]).text()+"</span></div>");
					}
					ins.reload();
				}
			}
			
			
			
			layui.use(['carousel','upload','layer'], function() {
				
				layer = layui.layer;
				carousel = layui.carousel;
				//建造实例
				ins = carousel.render({
					elem: '#test1'
					,width: '1000px' //设置容器宽度
					,height:'500px'
					,arrow: 'always' //始终显示箭头
					,arrow: 'always' //始终显示箭头
				});
				
				
				
				var upload = layui.upload;
				//执行实例
				var uploadInst = upload.render({
					elem: '#test2' //绑定元素,指向容器选择器
					,url: '/upload_file1.php' //上传接口
					,multiple : true //是否允许多文件上传
					,number : 3 //设置同时可上传的文件数量
					,done: function(res) {
						//上传完毕回调
						js++;
						console.log(res.file_name);
						var a=
						'<div tex="'+js+'">'+
							'<button onclick="le(this)" type="button" class="layui-btn layui-btn-primary">'+
			  					'<i class="layui-icon">&#xe603;</i>'+
							'</button>'+
							'<span class="s"><a href="https://www.baidu.com/"><img src="upload/img'+res.file_name+'"/></a></span>'+
							'<button onclick="ri(this)" type="button" class="layui-btn layui-btn-primary">'+
			  					'<i class="layui-icon">&#xe602;</i>'+
							'</button>'+
'							<button type="button" onclick="sc(this)" class="sc"><i class="layui-icon">&#x1006;</i></button>'+							'<div class="bbtt" onclick="bt(this)">'+
							'标题'+
							'</div>'+
							'<div class="lj" onclick="lj(this)">'+
							'链接'+
							'</div>'+
						'</div>';
						$("#div1").append(a);
						
						$("#test1>div").html("");
						for (var a = 0;a<$(".s").length;a++) {
							$("#test1>div").append("<div>"+$($(".s")[a]).html()+"<span class='bt'>"+$($(".bbtt")[a]).text()+"</span></div>");
						}
						ins.reload();
					}
					,error: function() {
						//请求异常回调
					}
				});
			});
			function bt(obj){
				layer.prompt({
				  formType: 2,
				  value: '标题',
				  title: '修改标题',
				  area: ['350px', '350px'] //自定义文本域宽高
				}, function(value, index, elem){
				  $(obj).text(value);
				  $("#test1>div").html("");
				  for (var a = 0;a<$(".s").length;a++) {
					$("#test1>div").append("<div>"+$($(".s")[a]).html()+"<span class='bt'>"+$($(".bbtt")[a]).text()+"</span></div>");
				  }
				  layer.close(index);
				  ins.reload();
				});
			}
			
			function lj(obj){
				layer.prompt({
				  formType: 2,
				  value: '链接',
				  title: '修改链接',
				  area: ['350px', '150px'] //自定义文本域宽高
				}, function(value, index, elem){
				  $(obj).html(value);
				  $(obj).siblings(".s").children("a").attr("href",value);
				  $("#test1>div").html("");
				  for (var a = 0;a<$(".s").length;a++) {
					$("#test1>div").append("<div>"+$($(".s")[a]).html()+"<span class='bt'>"+$($(".bbtt")[a]).text()+"</span></div>");
				  }
				  layer.close(index);
				  ins.reload();
				});
			}
			
			
			function sc(obj){
				$('[tex='+$(obj).parent().attr("tex")+']').remove();
				var arr11=[];
				var data11 = $("#div1>div").length;
				js = $("#div1>div").length-1;
				for (var a = 0;a<$("#div1>div").length;a++) {
					arr11.push($("#div1>div").eq(a).html());
				}
				$("#div1").html("");
				for (var b = 0;b<data11;b++) {
					$("#div1").append('<div tex="'+b+'">'+arr11[b]+'</div>');
				}
				$("#test1>div").html("");
				for (var a = 0;a<$(".s").length;a++) {
					$("#test1>div").append("<div>"+$($(".s")[a]).html()+"<span class='bt'>"+$($(".bbtt")[a]).text()+"</span></div>");
				}
				ins.reload();
				
			}
			
			
			
			
			$(document).ready(function(){
				for (var a = 0;a<$(".s").length;a++) {
					$("#test1>div").append("<div>"+$($(".s")[a]).html()+"<span class='bt'>"+$($(".bbtt")[a]).text()+"</span></div>");
				}
				console.log($(".s").length);
			});
		</script>
	</body>
</html>
